import { CommonModal } from '@/pages/OrderModule/common/components/CommonModal';
import Typography from '@/pages/OrderModule/common/components/Typography';
import CommonLoading from '@/components/CommonLoading';
import { QuestionCircleOutlined } from '@ant-design/icons';
import { Alert, Popover } from 'antd';
import PriceFormat from '../../components/PriceFormat';
import Api from '../../service';
import { useEffect, useState } from 'react';
import { countOrderSum } from '../../utils/checkOrderConfig';
import { updateOrderStatus } from '../../utils/orderStatus';
import { renderAmountDesc } from '../../utils/utils';

const amountEl = renderAmountDesc();
/** 订单返审核 */
const OrderReturnReviewModal = (props) => {
	const { item, selectKeys, orderList, handleOk, handleCancel } = props;
	const { scene } = item;
	const [isOk, setIsOk] = useState(false);
	const [loading, setLoading] = useState(false);
	const [previewData, setPreviewData] = useState({});

	const [open, setOpen] = useState(false);

	useEffect(() => {
		getPreviewData();
		setOpen(true);
	}, [])

	//获取预览数据
	const getPreviewData = async () => {
		setLoading(true);
		const params = {
			orderIds: selectKeys
		}
		const { success, data } = await Api.reVertifyOrder(params);
		if (success) {
			setPreviewData(data);
		}
		setLoading(false);
	}

	const onOk = () => {
		setLoading(true);
		updateOrderStatus(scene, {
			orderIds: selectKeys,
			tradeNo: previewData.tradeNo
		},(val) => {
			setLoading(false);
			if(val) {
				setIsOk(true);
				setOpen(false);
			}
		})
	}

	const onCancel = () => {
		setOpen(false);
	}

	const afterClose = () => {
		if (isOk) {
			setTimeout(()=>{
				handleOk(2);
			}, 1000)
		} else {
			handleCancel();
		}
	}

	const Question = () => {
		return (
			<Popover content={amountEl}>
				<QuestionCircleOutlined />
			</Popover>
		);
	}

	//金额渲染
	const renderAmount = () => {
		const { resultHandleType, refundAmountCount = {} } = previewData;
		if (resultHandleType == 2) {
			return (
				<>
					<div style={{ marginTop: 12 }}>
						返审核金额：
						<Typography color="#999" as="s1">
							（针对已支付的代发订单，作废或返审核将会对金额进行处理）
							<Question />
						</Typography>
					</div>
					<div style={{ marginTop: 12 }}>
						退回金额：
						<PriceFormat price={refundAmountCount.totalPayAmount} />
						（含运费
						<PriceFormat price={refundAmountCount.logisticsAmount} />
						、包材费
						<PriceFormat price={refundAmountCount.packedAmount} />
						、服务费
						<PriceFormat price={refundAmountCount.serviceAmount} />）
					</div>
					<div style={{ marginTop: 12 }}>
						退货退款：
						<PriceFormat price={refundAmountCount.refundGoodsAmount} />
					</div>
				</>
			)
		}
		return null;
	}

	//待发货的订单
	const orderCount = countOrderSum(scene, selectKeys, orderList);


	return (
		<CommonModal title={{ title: '订单返审核' }} afterClose={afterClose} open={open} width="550px" onOk={onOk} onCancel={onCancel}>
			<Alert showIcon message={<Typography as="s1">您正在返审核订单，“待发货”的订单一旦返审核将会同步仓库，请仔细考虑操作！</Typography>} />
			<div style={{ fontWeight: 500, color: '#333' }}>
				<div style={{ marginTop: 16 }}>
					待发货订单数：
					<Typography useBold>{orderCount}</Typography>
				</div>
				{renderAmount()}
			</div>
			<CommonLoading loading={loading} />
		</CommonModal>
	);
}

export default OrderReturnReviewModal;
